<!--
 * @Author: your name
 * @Date: 2021-11-19 21:19:33
 * @LastEditTime: 2021-11-22 15:30:10
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\xmxz\index.vue
-->
<template>
    <div>
        <div class="labeqlOne">
            <div class="xiangqing">
                <span>详情</span>
                <span>x</span>
            </div>
            <div class="content" v-for="(item, index) in xiangqingList" :key="index">
                <span>{{ item.name }}</span>
                <span>{{ item.number }}</span>
            </div>
        </div>
    </div>
</template>

<script>

import { mapState } from "vuex";
export default {
    data() {
        return {
            xiangqingList: [
                {
                    name: '地块编码',
                    number: '0101'
                },
                {
                    name: '租地面积(m²)',
                    number: '12992.31'
                },

                {
                    name: '土地使用性质',
                    number: 'No3-105'
                },

                {
                    name: '地面以上总建筑面积',
                    number: '12992.31'
                },

                {
                    name: '建筑面积',
                    number: '12995.69'
                },
                {
                    name: '建筑高度',
                    number: '584.41'
                },
                {
                    name: '规划状态',
                    number: '待完善'
                },

            ],
        };
    },

    watch: {},

    created() { },
    mounted() {

    },
    beforeCreate() { },
    beforeMount() { },
    beforeUpdate() { },
    updated() {
        // this.getResultCode();
    },
    beforeDestroy() { },
    destroyed() { },
    activated() { },

};
</script>

<style lang="scss" scoped>
.labeqlOne {
    width: 300px;
    height: 330px;
    position: absolute;
    right: 505px;
    top: 490px;
    border-radius: 4px;

    // background: linear-gradient(
    //   -90deg,
    //   rgba(37, 52, 80, 0.8) 0%,
    //   rgba(5, 49, 126, 0) 100%
    // );
    background: linear-gradient(
        -90deg,
        rgba(12, 19, 36, 0.8) 0%,
        rgba(1, 28, 73, 0.5) 100%
    );
    .xiangqing {
        width: 270px;
        height: 30px;
        // border: 1px solid;
        // border-color: transparent transparent #71cbc3 transparent;
        border-top-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
        // border-bottom-color: red;
        border-bottom-color: #71cbc3;
        display: flex;
        justify-content: space-between;
        margin: 10px 0 10px 10px;
        color: #71cbc3;
    }
    .content {
        width: 270px;
        height: 30px;
        display: flex;
        justify-content: space-between;
        margin: 10px 0 10px 10px;
        span:nth-child(1) {
            color: #71cbc3;
        }
    }
}
</style>

